<template>
  <div class="tea-brewing">
    <h3 class="title">茶饮冲泡方法</h3>
    <div class="timeline-container">
      <div class="timeline">
        <div v-for="(step, index) in currentTea.brewingSteps" :key="index" class="timeline-item">
          <div class="timeline-content">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-info">
              <div class="step-title">{{ step.title }}</div>
              <div class="step-description">{{ step.description }}</div>
              <div class="step-tips" v-if="step.tips">
                <i class="fa fa-lightbulb-o"></i>
                <span>{{ step.tips }}</span>
              </div>
            </div>
          </div>
          <div class="timeline-connector" v-if="index < currentTea.brewingSteps.length - 1">
            <div class="connector-line"></div>
            <div class="connector-arrow"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

const props = defineProps({
  constitution: {
    type: String,
    required: true
  }
});

// 添加getRecommendedTeas函数
const getRecommendedTeas = (constitution) => {
  const teaRecommendations = {
    '平和质': ['绿茶', '白茶'],
    '气虚质': ['红茶', '乌龙茶'],
    '阳虚质': ['红茶', '黑茶'],
    '阴虚质': ['白茶', '绿茶'],
    '痰湿质': ['乌龙茶', '普洱茶'],
    '湿热质': ['绿茶', '白茶'],
    '血瘀质': ['红茶', '黑茶'],
    '气郁质': ['花茶', '乌龙茶'],
    '特禀质': ['白茶', '绿茶']
  };
  return teaRecommendations[constitution] || ['绿茶'];
};

// 获取推荐茶饮
const recommendedTeas = computed(() => {
  return getRecommendedTeas(props.constitution);
});

// 冲泡步骤数据
const brewingData = {
  '绿茶': {
    icon: 'fa fa-leaf',
    brewingSteps: [
      { 
        title: '温杯', 
        description: '用热水温烫茶杯，提高茶杯温度，避免温差影响茶汤品质',
        tips: '建议使用80℃左右的热水温杯'
      },
      { 
        title: '投茶', 
        description: '取3-5g茶叶放入杯中，茶叶量可根据个人口味调整',
        tips: '建议使用茶匙取茶，避免手直接接触茶叶'
      },
      { 
        title: '注水', 
        description: '注入85℃左右热水，水量约为茶杯的七分满',
        tips: '注水时沿杯壁缓慢注入，避免直接冲击茶叶'
      },
      { 
        title: '等待', 
        description: '等待30秒左右，让茶叶充分舒展',
        tips: '等待时间可根据个人口味调整，时间越长茶汤越浓'
      },
      { 
        title: '闻香', 
        description: '轻轻摇晃茶杯，感受茶叶的香气',
        tips: '注意观察茶汤的颜色变化'
      },
      { 
        title: '品饮', 
        description: '即可品饮，感受茶汤的清香和滋味',
        tips: '建议小口慢饮，细细品味'
      }
    ]
  },
  '红茶': {
    icon: 'fa fa-coffee',
    brewingSteps: [
      { 
        title: '温杯', 
        description: '用热水温烫茶杯，提高茶杯温度',
        tips: '建议使用90℃左右的热水温杯'
      },
      { 
        title: '投茶', 
        description: '取3-5g茶叶放入杯中',
        tips: '红茶茶叶较细，建议使用茶漏'
      },
      { 
        title: '注水', 
        description: '注入90-95℃热水，水量约为茶杯的七分满',
        tips: '注水时沿杯壁缓慢注入'
      },
      { 
        title: '等待', 
        description: '等待45秒左右，让茶叶充分释放香气',
        tips: '等待时间可根据个人口味调整'
      },
      { 
        title: '品饮', 
        description: '即可品饮，感受红茶的醇厚滋味',
        tips: '建议搭配点心一起享用'
      }
    ]
  },
  '白茶': {
    icon: 'fa fa-snowflake-o',
    brewingSteps: [
      { 
        title: '温杯', 
        description: '用热水温烫茶杯，提高茶杯温度',
        tips: '建议使用85℃左右的热水温杯'
      },
      { 
        title: '投茶', 
        description: '取5-7g茶叶放入杯中',
        tips: '白茶茶叶较大，建议使用茶匙取茶'
      },
      { 
        title: '注水', 
        description: '注入90℃左右热水，水量约为茶杯的七分满',
        tips: '注水时沿杯壁缓慢注入'
      },
      { 
        title: '等待', 
        description: '等待60秒左右，让茶叶充分舒展',
        tips: '白茶耐泡，可多次冲泡'
      },
      { 
        title: '品饮', 
        description: '即可品饮，感受白茶的清雅滋味',
        tips: '建议细细品味，感受茶汤的变化'
      }
    ]
  },
  '乌龙茶': {
    icon: 'fa fa-pagelines',
    brewingSteps: [
      { 
        title: '温杯', 
        description: '用热水温烫茶杯，提高茶杯温度',
        tips: '建议使用95℃左右的热水温杯'
      },
      { 
        title: '投茶', 
        description: '取7-8g茶叶放入杯中',
        tips: '乌龙茶茶叶较大，建议使用茶匙取茶'
      },
      { 
        title: '注水', 
        description: '注入95-100℃热水，水量约为茶杯的七分满',
        tips: '注水时沿杯壁缓慢注入'
      },
      { 
        title: '等待', 
        description: '等待30秒左右，让茶叶充分舒展',
        tips: '乌龙茶耐泡，可多次冲泡'
      },
      { 
        title: '品饮', 
        description: '即可品饮，感受乌龙茶的独特香气',
        tips: '建议细细品味，感受茶汤的变化'
      }
    ]
  },
  '花茶': {
    icon: 'fa fa-pagelines',
    brewingSteps: [
      { 
        title: '温杯', 
        description: '用热水温烫茶杯，提高茶杯温度',
        tips: '建议使用85℃左右的热水温杯'
      },
      { 
        title: '投茶', 
        description: '取3-5g花茶放入杯中',
        tips: '花茶较细，建议使用茶漏'
      },
      { 
        title: '注水', 
        description: '注入85-90℃热水，水量约为茶杯的七分满',
        tips: '注水时沿杯壁缓慢注入'
      },
      { 
        title: '等待', 
        description: '等待45秒左右，让花朵充分绽放',
        tips: '等待时间可根据个人口味调整'
      },
      { 
        title: '品饮', 
        description: '即可品饮，感受花茶的芬芳',
        tips: '建议细细品味，感受花香的变化'
      }
    ]
  }
};

// 获取当前茶饮
const currentTea = computed(() => {
  const teaData = {
    '平和质': '绿茶',
    '气虚质': '红茶',
    '阳虚质': '红茶',
    '阴虚质': '白茶',
    '痰湿质': '乌龙茶',
    '湿热质': '绿茶',
    '血瘀质': '红茶',
    '气郁质': '花茶',
    '特禀质': '白茶'
  };
  
  const teaName = teaData[props.constitution] || '绿茶';
  return {
    name: teaName,
    ...brewingData[teaName]
  };
});

onMounted(() => {
  getRecommendedTeas();
});
</script>

<style scoped>
.tea-brewing {
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.title {
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  margin-bottom: 8px;
  text-align: center;
}

.timeline-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  height: calc(100% - 30px);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 0 10px;
}

.timeline-item {
    width: 300px;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 95px;
}

.timeline-content {
  background: rgba(50, 204, 238, 0.1);
  border-radius: 4px;
  padding: 8px;
  border: 1px solid rgba(50, 204, 238, 0.3);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.step-number {
  
  width: 24px;
  height: 24px;
  background: #32ccee;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  margin-bottom: 8px;
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.step-title {    
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: bold;
}

.step-description {
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  flex: 1;
}

.step-tips {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ff9800;
  font-size: 11px;
  margin-top: 4px;
}

.step-tips i {
  font-size: 12px;
}

.timeline-connector {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.connector-line {
  width: 20px;
  height: 2px;
  background: #32ccee;
}

.connector-arrow {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #32ccee;
  margin-left: -2px;
}

/* 自定义滚动条样式 */
.timeline-container::-webkit-scrollbar {
  width: 4px;
}

.timeline-container::-webkit-scrollbar-track {
  background: rgba(50, 204, 238, 0.1);
  border-radius: 2px;
}

.timeline-container::-webkit-scrollbar-thumb {
  background: rgba(50, 204, 238, 0.3);
  border-radius: 2px;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
  background: rgba(50, 204, 238, 0.5);
}
</style> 